import React, { Component } from 'react'
import store from "./redux/story"
import { addAction, disAction,addAsyncAction } from "./redux/app_action"

export default class App extends Component {
  render() {
    console.log(store.getState());
    return (
      <div className='App'>
        <h1>{store.getState().n}</h1>
        <select ref={c => this.c = c}>
          <option>2</option>
          <option>5</option>
          <option>8</option>
        </select>
        <div>
          <button onClick={this.add}>++</button>
          <button onClick={this.dis}>--</button>
          <button onClick={this.addAsync}>异步++</button>
        </div>
      </div>
    )
  }
  add = () => {
    store.dispatch(addAction(this.c.value * 1))
  }
  dis = () => {
    store.dispatch(disAction(this.c.value * 1))
  }
  // 异步redux
  addAsync = () => {
    // store.dispatch((dispatch)=>{
    //   setTimeout(()=>{
    //     dispatch({type:"addAsync",data:this.c.value*1})
    //   },1000)
    // })
    store.dispatch(addAsyncAction(this.c.value * 1))
  }
}
